<style lang="scss" src="../login/index.scss" scoped></style>
<template>
    <div class="auth-login-box enter">
        <div class="auth-login__body">
            <auth-card :border="false">
                <div class="auth-login__form-box">
                    <div class="auth-login__form-title">重置密码</div>
                    <validation-observer ref="observerRef" slim>
                        <el-form
                            class="transparent-form"
                            label-width="0"
                            ref="formRef"
                            @keyup.enter.native="update"
                        >
                            <validation-provider
                                    name="model.phone"
                                    :rules="'required'"
                                    :customMessages="{ required: '请输入手机号' }"
                                    slim
                                >
                                <el-form-item required>
                                    <div class="cf__group">
                                        <div class="cf__group-info">
                                            <el-input
                                                v-model.trim="model.phone"
                                                name="model.phone"
                                                placeholder="请输入手机号"
                                                maxlength="30"
                                                auto-complete="off"
                                            >
                                                <!-- <div class="cf__group-info-icon user" slot="prefix"></div> -->
                                                <div class="cf__group-info-icon" slot="prefix">
                                                    <icon-svg name="icon-fill-phone"></icon-svg>
                                                </div>
                                            </el-input>
                                        </div>
                                    </div>
                                </el-form-item>
                            </validation-provider>
                            <validation-provider
                                    name="model.captcha"
                                    :rules="'required'"
                                    :customMessages="{ required: '请输入验证码' }"
                                    slim
                                >
                                <el-form-item required>
                                    <div class="cf__group">
                                        <div class="cf__group-info flex">
                                            <el-input
                                                v-model.trim="model.captcha"
                                                name="model.captcha"
                                                placeholder="请输入验证码"
                                                maxlength="6"
                                                auto-complete="off"
                                            >
                                                <div class="cf__group-info-icon" slot="prefix">
                                                    <icon-svg name="icon-fill-message"></icon-svg>
                                                </div>
                                            </el-input>
                                            <captcha-btn class="captcha-box" :phone="model.phone" @on-send="handleSend" regCheck  ref="captchaBtn"></captcha-btn>
                                        </div>
                                    </div>
                                </el-form-item>
                            </validation-provider>
                            <validation-provider
                                    name="model.password"
                                    :rules="{
                                        required: true,
                                        regex: /(?!.*\s)(?!^[\u4e00-\u9fa5]+$)(?!^[0-9]+$)(?!^[A-z]+$)(?!^[^A-z0-9]+$)^.{6,12}$/
                                    }"
                                    :customMessages="{
                                        required: '请输入验证码',
                                        regex: '请将密码设置为6-12位，并且由字母，数字和符号两种以上组合，不能与旧密码相同'
                                    }"
                                    slim
                                >
                                <el-form-item required>
                                    <div class="cf__group">
                                        <div class="cf__group-info">
                                            <el-input
                                                type="password"
                                                v-model.trim="model.password"
                                                name="model.password"
                                                placeholder="请输入密码"
                                                maxlength="12"
                                                auto-complete="off"
                                            >
                                                <!-- <div class="cf__group-info-icon pass" slot="prefix"></div> -->
                                                <div class="cf__group-info-icon" slot="prefix">
                                                    <icon-svg name="icon-fill-lock"></icon-svg>
                                                </div>
                                            </el-input>
                                        </div>
                                        <div class="cf__group-tips">
                                            <i class="el-icon-warning"></i>请将密码设置为6-12位，并且由字母，数字和符号两种以上组合，不能与旧密码相同
                                        </div>
                                    </div>
                                </el-form-item>
                            </validation-provider>
                            <auth-tip ref="authTipRef"></auth-tip>
                            <el-form-item>
                                <el-button
                                    class="auth-login__form-btn"
                                    type="primary"
                                    :loading="btnLoader"
                                    @click="update">
                                    {{ btnLoader ? "处理中": "确认"}}
                                </el-button>
                            </el-form-item>
                            <el-form-item>
                                <el-button
                                    class="auth-login__form-btn cancel"
                                    type="primary"
                                    @click="handleCancel">
                                    取消
                                </el-button>
                            </el-form-item>
                        </el-form>
                    </validation-observer>
                </div>
            </auth-card>
        </div>
        <footer-info></footer-info>
    </div>
</template>

<script lang="ts">
import { ValidationObserver, ValidationProvider } from 'vee-validate';
import AuthCard from '../components/card/index.vue';
import CaptchaBtn from '../components/captcha-btn/index.vue';
import FooterInfo from '../components/footer-info/index.vue';
import AuthTip from '../components/auth-tip/index.vue';
import { Component, Mixins } from "vue-property-decorator";
import AuthCommonMixin from "../../common.mixin";
import FormMixin from "@/mixins/form.mixin.base.ts";
import { State } from 'vuex-class';
interface Model{
    phone: string;
    password: string;
    captcha: string;
    uuid: string;
    captchaUrl: string;
}
interface CaptchaMsg{
    result: boolean;
    msg: string;
}
@Component({
    name: "ForgetNotAlive",
    components: {
        ValidationProvider,
        ValidationObserver,
        AuthCard,
        CaptchaBtn,
        FooterInfo,
        AuthTip
    }
})
export default class Forget extends Mixins(AuthCommonMixin, FormMixin) {
    btnLoader = false;
    pageEnter = false;
    model: Model = {
        // phone: 'admin',
        phone: '',
        // password: 'secret',
        password: '',
        captcha: '',
        uuid: "",
        captchaUrl: ""
    }


    @State("user.userInfo") user: any;

    mounted() {
        // this.formatCaptcha();
        this.$nextTick(() => {
            setTimeout(() => {
                this.pageEnter = true;
            }, 500);
        });
    }

    async update() {
        if (this.btnLoader) return;

        const observerRef: any = this.$refs.observerRef;
        const validateResult: any = await observerRef.validate();

        if (validateResult) {
            this.onSubmit();
            return;
        }
        console.log(observerRef.errors);
        for (const key in observerRef.errors) {
            if (Object.prototype.hasOwnProperty.call(observerRef.errors, key)) {
                const cur: any = observerRef.errors[key];
                if (cur.length > 0) {
                    this.triggerMsg("el-icon-warning", cur[0]);
                    break;
                }
            }
        }
    }

    async handleSend(data: CaptchaMsg) {
        // 输入手机号格式不正确
        if (!data.result) {
            this.triggerMsg("el-icon-warning", data.msg);
            return false;
        }
        this.btnLoader = true;
        const response = await this.$server["user/sendCode"]({
            data: {
                tel: this.model.phone
            }
        });
        this.btnLoader = false;
        if (this.responseHasError(response, (res: any) => {
            this.triggerMsg("el-icon-warning", (res.data ? res.data.message : res.message) || "接口请求错误!");
            (this.$refs.captchaBtn as any).clear();
        })) {
            return;
        }
        this.triggerMsg("el-icon-circle-check", "验证码已发送！");
    }

    async onSubmit() {
        const {
            phone,
            password,
            captcha
        } = this.model;
        this.btnLoader = true;
        const response = await this.$server["user/resetPass"]({
            data: {
                tel: phone,
                password: password,
                code: captcha
            }
        });
        if (this.responseHasError(response, (res: any) => {
            this.triggerMsg("el-icon-warning", (res.data ? res.data.message : res.message) || "接口请求错误!");
        })) {
            this.btnLoader = false;
            return;
        }
        this.triggerMsg("el-icon-circle-check", "密码已重置！", () => {
            this.btnLoader = false;
            this.handleCancel();
        });
    }

    handleCancel() {
        this.$router.replace({ name: "AuthLogin" });
    }
}
</script>
